<template>
  <div class="menuRight">
    <div class="fullscreen" @click="fullScreen">
      <i class="el-icon-full-screen"></i>
    </div>
    <div class="reset" @click="reset">
      <i class="el-icon-refresh-left"></i>
    </div>
    <div class="userDetail">
      <span>{{ helloWord }}，</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ nickname }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/profile"
            ><el-dropdown-item>修改个人资料</el-dropdown-item></router-link
          >
          <el-dropdown-item divided @click.native="logOut"
            >退出</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <div class="avatar">
        <span> <img src="../assets/logo.png" alt="" /> </span>
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  name: "MenuRight",
  data() {
    return {
      isFullscreen: false,
      nickname: "",
      helloWord: "上午好",
    };
  },
  inject: ["reload"],
  created() {
    this.nickname = this.$store.state.nickname;
  },
  mounted() {
    window.onresize = () => {
      if (!this.checkFull()) {
        this.isFullscreen = false;
      }
    };
    this.sayHello();
  },
  methods: {
    //退出操作
    logOut() {
      this.$store
        .dispatch("Logout")
        .then((res) => {
          this.$router.replace("/login");
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    sayHello() {
      const time = new Date().toLocaleTimeString().slice(0, 2);
      this.helloWord = time + "好";
    },
    reset() {
      this.reload();
    },
    fullScreen() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "你的浏览器不支持全屏",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
      this.isFullscreen = true;
    },
    checkFull() {
      var isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.menuRight {
  position: relative;
  width: 100%;
  height: 100%;
}
.fullscreen {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(0, -50%);
  width: 10%;
  height: 50%;
  line-height: 6vh;
  font-size: 1.5rem;
  cursor: pointer;
}
.reset {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(0, -50%);
  width: 10%;
  height: 50%;
  line-height: 6vh;
  font-size: 1.5rem;
  cursor: pointer;
}
.reset:hover i {
  color: #5794ff;
}
.userDetail {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translate(0, -50%);
  max-width: 70%;
  height: 50%;
  line-height: 6vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.userDetail span {
  margin-right: 15px;
}
.avatar {
  float: right;
  width: 37px;
  height: 37px;
  background-color: #ffffff;
  border: 2px solid #8790fc;
  border-radius: 50%;
}
.avatar img {
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  z-index: 99;
}
.el-dropdown-link {
  cursor: pointer;
}
.el-dropdown-link:hover {
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>